
<template>
  <div class="relative timeline-detail">
    <el-dialog  title="查看" :visible="dialogVisible" v-bind:width="width" @close="close">
      <div class="detail-wrapper">
          <div class="flex1">
              <el-row :gutter="4" justify="space-between">
                <el-col :span="24" class="col-row" v-for="(item,index) in columns" :key="index">
                    <div class="title">
                        {{item.title}} : 
                    </div>
                    <div class="main">{{list[item.dataIndex]||'-'}}</div>
                </el-col>
            </el-row>
          </div>
          <div v-if = "list.eventFlowData && list.eventFlowData.length>0" class="flex1">
              <Timeline :list="list.eventFlowData" :title="list.eventName"/>
          </div>
      </div>
      <!-- <el-row>
      <el-col :span="12" v-for="(item,index) in columns" :key="index">{{`${item.title}: ${list[item.dataIndex]||'-'}`}}</el-col>
    </el-row> -->
      <!-- <span slot="footer" class="dialog-footer">
	  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span> -->
    </el-dialog>

    <div v-if = "!!currentImg" @click = "toggleMaskImg" class="img-mask">
      <img :src="currentImg" alt="">
    </div>
  </div>

</template>
<script>
import Timeline from "./Timeline";

export default {
    //详情封装
    //用法示例：
    name: "viewDetail",
    components:{Timeline},
    data() {
        return {
            // visible:false
            currentImg: "",
        };
    },
    props: {
        list: Object, //数据
        width: String, //弹窗宽度
        columns: Array, //数据名称集合[{title:'姓名',dataIndex:'name',……},
        dialogVisible: {
            type: Boolean,
            default: false
        }, //窗口显示/关闭
        onClose: Function //关闭弹窗的回调
    },
    methods: {
      /**
       * 关闭dialog
       */
        close(e) {
            this.$emit("onClose");
        },
        /**
         * 关闭放大图片
         */
        toggleMaskImg(){
          this.currentImg = "";
        },
        /**
         * 放大图片
         */
        onShowImg(url){
          this.currentImg = url;
        }
    },
    created() {
    }
    // watch:{
    //     dialogVisible:function(val, oldVal){
    //       this.visible=val
    //     }
    // }
};
</script>

<style lang="scss" scoped>
.timeline-detail{
    .detail-wrapper{
        display: flex;
        max-height: 70vh;
        overflow: auto;
    }
    .col-row{
        padding-top: 5px;
        padding-bottom: 5px;
        display: flex;
    }
    .title {
        font-weight: 500;
        width: 120px;
        text-align: right;
        margin-right: 15px;
    }
    .main {
        padding-left: 5px;
        padding-right: 10px;
        flex:1;
    }
    .default-img{
    max-width: 180px;
    cursor: pointer;
    }
    .img-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            max-width: 60vw;
            max-height: 60vh;
        }
    }
}

</style>

